import React, { Component } from "react";
import { Route,Switch } from "react-router-dom";
import { Layout, Menu, Row, Col, Button } from "antd";
import MyNavLink from "./compoents/MyNavLink";
import Test from "./compoents/Testlzp";
import "antd/dist/antd.css";
import "./App.css";
import {
  PieChartOutlined,
  UserOutlined,
  IdcardOutlined,
  DollarOutlined,
  FileSearchOutlined,
  MedicineBoxOutlined,
  ExpandOutlined,
  ExperimentOutlined,
  MailOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  HomeOutlined,
  PoweroffOutlined,
} from "@ant-design/icons";

const { Content, Sider } = Layout;
const { SubMenu } = Menu;

class App extends Component {
  state = {
    collapsed: false,
    theme: "dark",
    current: "1",
  };

  onCollapse = (collapsed) => {
    // console.log(collapsed);
    this.setState({ collapsed });
  };
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };
  handleClick = (e) => {
    // console.log("click ", e);
    this.setState({
      current: e.key,
    });
  };
  render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          theme={this.state.theme}
          collapsible
          collapsed={collapsed}
          onCollapse={this.onCollapse}
        >
          {/* <div className="logo">
          </div> */}
          <Menu 
            theme={this.state.theme}
            onClick={this.handleClick}
            defaultSelectedKeys={["1"]}
            mode="inline"
          >
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              数据视图
            </Menu.Item>
            <SubMenu key="sub1" icon={<MedicineBoxOutlined />} title="问诊管理">
              <Menu.Item key="2">在线复诊</Menu.Item>
              <Menu.Item key="3">续方购药</Menu.Item>
            </SubMenu>
            <Menu.Item key="4" icon={<FileSearchOutlined />}>
              药品订单管理
            </Menu.Item>
            <SubMenu key="sub2" icon={<IdcardOutlined />} title="医生管理">
              <Menu.Item key="5">医生列表</Menu.Item>
              <Menu.Item key="6">新增医生</Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" icon={<DollarOutlined />} title="财务管理">
              <Menu.Item key="7">问诊订单</Menu.Item>
              <Menu.Item key="8">处方订单</Menu.Item>
            </SubMenu>
            <SubMenu key="sub4" icon={<ExpandOutlined />} title="运营管理">
              <Menu.Item key="9">评价</Menu.Item>
              <Menu.Item key="10">热门医生</Menu.Item>
              <Menu.Item key="11">公告</Menu.Item>
            </SubMenu>
            <Menu.Item key="12" icon={<UserOutlined />}>
              就诊人管理
            </Menu.Item>
            <SubMenu key="sub5" icon={<ExperimentOutlined />} title="药品管理">
              <Menu.Item key="13">药品查询</Menu.Item>
              <Menu.Item key="14">新增药品</Menu.Item>
            </SubMenu>
            <SubMenu key="sub6" icon={<MailOutlined />} title="药房管理">
              <Menu.Item key="22">
                <MyNavLink to="/test" className='nav_link'>测试</MyNavLink>
              </Menu.Item>
              <Menu.Item key="23">院内药房</Menu.Item>
              <Menu.Item key="24">药品挂靠</Menu.Item>
            </SubMenu>
            <SubMenu key="sub7" icon={<MailOutlined />} title="系统管理">
              <Menu.Item key="15">角色及权限</Menu.Item>
              <Menu.Item key="16">人员管理</Menu.Item>
              <Menu.Item key="17">疾病管理</Menu.Item>
              <Menu.Item key="18">科室管理</Menu.Item>
              <Menu.Item key="19">短信模板</Menu.Item>
              <Menu.Item key="20">消息模板</Menu.Item>
              <Menu.Item key="21">日志</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout right">
          <div className="content_header">
            <Row>
              <Col span={6}>
                <Row>
                  <Col span={4}></Col>
                  <Col span={10}>
                    <Button
                      onClick={this.toggleCollapsed}
                      style={{ marginBottom: 16 }}
                    >
                      {React.createElement(
                        this.state.collapsed
                          ? MenuUnfoldOutlined
                          : MenuFoldOutlined
                      )}
                    </Button>
                  </Col>
                  <Col span={10}>
                    <Switch
                      checked={this.state.theme === "dark"}
                      onChange={this.changeTheme}
                      checkedChildren="Dark"
                      unCheckedChildren="Light"
                    />
                  </Col>
                </Row>
              </Col>
              <Col span={12}></Col>
              <Col span={6}>
                <Row>
                  <Col className="nav_hover" span={2}>
                    <UserOutlined />
                  </Col>
                  <Col className="nav_hover" span={8}>
                    momo.xyz
                  </Col>
                  <Col className="nav_hover" span={4}>
                    <HomeOutlined />
                  </Col>
                  <Col className="nav_hover" span={4}>
                    <PoweroffOutlined />
                  </Col>
                </Row>
              </Col>
            </Row>
          </div>
          <Content className="content" style={{ margin: "16px" }}>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 360 }}
            >
              {/* 此处为跳转路由 */}
                <Switch>
                <Route path="/test" component={Test}></Route>
                </Switch>
                
            </div>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default App;
